
<template>
    <div class="layout">
        <Layout style="position:absolute;top:0;left:0;right:0;bottom:0">
            <Header class="s-top-box">
                <h1 v-text="siteName"></h1>
                <h2 v-show="subName=='' ? false : true" v-html="subNameDivide+subName"></h2>
                <div class="s-user-box pull-right">
                    <span v-show="userName=='' ? true : false"><a href="">登录</a> / <a>注册</a></span>
                    <span v-show="userName=='' ? false : true"><Icon type="md-person" size="20" style="position:relative;top:-3px;"/> {{userName}},您好！<router-link tag="a" to="/">退出</router-link></span>
                </div>
            </Header>
            <Content style="position:absolute;top:64px;left:0;right:0;bottom:0">
                <Layout style="position:absolute;top:0;left:0;right:0;bottom:0">
                    <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                        <Menu class="s-menu" :active-name="currentPage" theme="dark" width="200" :class="menuitemClasses" @on-select="menuSel">
                            <MenuItem name="/article" to="/article">
                                <Icon type="ios-navigate"></Icon>
                                <span>文章管理</span>
                            </MenuItem>
                            <MenuItem name="/test1" to="/test1">
                                <Icon type="ios-search"></Icon>
                                <span>测试1</span>
                            </MenuItem>
                            <MenuItem name="/test2" to="/test2">
                                <Icon type="ios-settings"></Icon>
                                <span>测试2</span>
                            </MenuItem>
                        </Menu>
                    </Sider>
                    <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                isCollapsed: false,
                siteName:'通用后台系统',//系统名称
                subName:'美迪康',//企业名称Data
                subNameDivide:"<span style='font-size: 30px;line-height:20px;'>—</span>",
                userName:'XXX',//用户名Data
                logoutUrl:'http://www.baidu.com',//退出链接

            }
        },
        computed: {
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            },
            currentPage:{//解决后退按钮时左侧导航的选中问题
                get() {
                    return this.common.getRouteFirst(this.$route.path);
                },
                set(value){
                    return value;
                }
            }
        },
        methods: {
            menuSel(e){
//                console.log(e);
            }
        },
        created(){
            this.currentPage=this.common.getRouteFirst(this.$route.path);//解决页面刷新时左侧导航的选中问题
        },
        mounted(){

        }
    }
</script>

<style scoped>
    .layout{
        background: #f5f7f9;
        overflow: hidden;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    .s-top-box{
        background-color: #2a7aec;
        color:#fff;
        padding:0 10px;
    }
    .s-top-box h1,.s-top-box h2{
        display: inline-block;
    }
    .s-user-box{
        margin-top:6px;
        font-size:14px;
    }
    .s-user-box a{
        color:#fff;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 120px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .pull-right{
        float:right;
    }
    .s-menu{
        padding-top:10px;
    }
</style>